<template>
	<view class="container">
		<view class="c-of-h case" :style="{height: num}">
			<view class="box o-plr-l o-pb o-mb c-bg-f">
				<view class="c-tc c-t6 c-tb" style="height: 30px;line-height: 30px;">当前救援进度</view>
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,index) in list" :key="index">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" :style="{'background': `${item.is_icon?'#2979ff':'#ffffff'}`}">
								<!-- 此处为uView的icon组件 -->
								<u-icon v-if="item.is_icon" name="checkmark" color="#fff" :size="20"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">
									<text class="c-tb">{{item.name}}</text> 
									<text v-if="item.is_icon" class="c-t6 c-tn c-color-g2 o-ml">{{item.date}}</text>
								</view>
								<view v-if="item.desc" class="u-order-desc">{{item.desc}}</view>
								
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
				<block v-if="repairInfo.length>0">
					<view v-for="(item, index) in repairInfo" :key="index" class="u-b l-fcc o-mt o-ptb">
						<view class="u-b c-r-max o-mr-b c-tc c-t6 c-color-b l-fcc" style="width: 120rpx;height: 120rpx;">{{item.name}}</view>
						<view class="c-line-11 c-tc">
							<view class="c-t65 c-color-b">{{item.desc}}</view>
							<view class="c-t6 c-color-g2">{{item.date}}起</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view @click="showCalendar()" class="l-fcc c-bg-f o-ptb-s u-bt">
			<u-icon :name="show_calendar?'arrow-up':'arrow-down'" color="#555555" size="28"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'state',
		data() {
			return{
				list: [{
					name: '未接警',is_icon:false
				},{
					name: '未派单',is_icon:false
				},{
					name: '未签到',is_icon:false
				}],
				num: '30px',
				show_calendar: false,
				height: null,
			}
		},
		props:{
			alarmInfo: {
				type: Array,
				default: function() {
					return []
				}
			},
			repairInfo: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		created() {
			let list = this.list;
			this.alarmInfo.filter((item, idx) => {
				list.fill(item,idx,idx+1)
			})
			console.log('a ==>', list)
			this.$nextTick(function(){
				console.log('a ==>', list)
			})
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.box').boundingClientRect(data => {
				console.log('ww =>',data.height)
				this.height = data.height
			}).exec();
		},
		methods:{
			//显示
			showCalendar() {
				this.show_calendar = !this.show_calendar;
				this.num = this.show_calendar?`${this.height}px`: '30px'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.case{
		transition: height .5s ease-in;
	}
	.u-node {
		width: 38rpx;
		height: 38rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
		border: 1px solid #007AFF;
		box-sizing: border-box;
	}

	.u-order-title {
		color: #333333;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	
</style>
